<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenType writing</title>
    <script type="text/javascript" src="dist/opentype.js"></script>
    <style>
        body {
            font: 13px Helvetica, arial, freesans, sans-serif;
            line-height: 1.4;
            color: #333;
            margin: 0 0 50px 0;
            padding: 0;
        }

        .container {
            width: 940px;
            margin-left: auto;
            margin-right: auto;
        }

        #glyphs {
            clear: both;
        }

        .wrapper {
            float: left;
            margin: 5px;
            border: 1px solid #ccc;
        }

        .wrapper span {
            text-align: center;
            background: #ddd;
            display: block;
        }
    </style>
</head>
<body>
<div class="container">
    <h1 id="fontFamilyName"></h1>

    <p>This font is generated dynamically in the browser.</p>
    <button onclick="font.download()">Download Font</button>

    <div id="glyphs"></div>
</div>

<script>
    function hexDump(bytes) {
        var hexString = bytes.map(function (v) {
            var h = v.toString(16);
            return h.length === 1 ? '0' + h : h;
        });
        return hexString.join(' ').toUpperCase();
    }

    // Create a canvas and adds it to the document.
    // Returns the 2d drawing context.
    function createGlyphCanvas(glyph, size) {
        var canvasId, html, glyphsDiv, wrap, canvas, ctx;
        canvasId = 'c' + glyph.index;
        html = '<div class="wrapper" style="width:' + size + 'px"><canvas id="' + canvasId + '" width="' + size + '" height="' + size + '"></canvas><span>' + glyph.index + '</span></div>';
        glyphsDiv = document.getElementById('glyphs');
        wrap = document.createElement('div');
        wrap.innerHTML = html;
        glyphsDiv.appendChild(wrap);
        canvas = document.getElementById(canvasId);
        ctx = canvas.getContext('2d');
        return ctx;
    }

    var notdefPath = new opentype.Path();
    notdefPath.moveTo(100, 0);
    notdefPath.lineTo(100, 700);
    notdefPath.lineTo(600, 700);
    notdefPath.lineTo(600, 0);
    notdefPath.moveTo(200, 100);
    notdefPath.lineTo(500, 100);
    notdefPath.lineTo(500, 600);
    notdefPath.lineTo(200, 600);
    var notdefGlyph = new opentype.Glyph({
        name: '.notdef',
        unicode: 0,
        advanceWidth: 650,
        path: notdefPath
    });

    var aPath = new opentype.Path();
    aPath.moveTo(100, 0);
    aPath.lineTo(100, 700);
    aPath.lineTo(600, 700);
    aPath.lineTo(600, 0);
    aPath.lineTo(500, 0);
    aPath.lineTo(500, 300);
    aPath.lineTo(200, 300);
    aPath.lineTo(200, 0);
    aPath.moveTo(200, 400);
    aPath.lineTo(500, 400);
    aPath.lineTo(500, 600);
    aPath.lineTo(200, 600);
    var aGlyph = new opentype.Glyph({
        name: 'A',
        unicode: 65,
        advanceWidth: 650,
        path: aPath
    });

    var bPath = new opentype.Path();
    bPath.moveTo(100, 0);
    bPath.lineTo(100, 700);
    bPath.lineTo(500, 700);
    bPath.lineTo(500, 400);
    bPath.lineTo(600, 400);
    bPath.lineTo(600, 0);
    bPath.moveTo(200, 400);
    bPath.lineTo(400, 400);
    bPath.lineTo(400, 600);
    bPath.lineTo(200, 600);
    bPath.moveTo(200, 100);
    bPath.lineTo(500, 100);
    bPath.lineTo(500, 300);
    bPath.lineTo(200, 300);
    var bGlyph = new opentype.Glyph({
        name: 'B',
        unicode: 66,
        advanceWidth: 650,
        path: bPath
    });

    var glyphs = [notdefGlyph, aGlyph, bGlyph];
    var font = new opentype.Font({familyName: 'OpenTypeSans', styleName: 'Medium', unitsPerEm: 1000, glyphs: glyphs});
    console.log(font.toTables());
    var buffer = font.toBuffer();
    var font2 = opentype.parse(buffer);

    document.getElementById('fontFamilyName').innerHTML = font2.familyName;

    for (var i = 0; i < font2.glyphs.length; i++) {
        var glyph = font2.glyphs[i];
        var ctx = createGlyphCanvas(glyph, 150);
        var x = 50;
        var y = 120;
        var fontSize = 72;
        glyph.draw(ctx, x, y, fontSize);
        glyph.drawPoints(ctx, x, y, fontSize);
        glyph.drawMetrics(ctx, x, y, fontSize);
    }

</script>
</body>
</html>
